import React from "react";
import { useNavigate } from 'react-router'
import { Card, Breadcrumb, Button } from 'antd'
import { useSelector, useDispatch } from "react-redux";
export default function Option1() {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const toAdress = (e) => {
    navigate('/')
    console.log(e)
  }

  let count = useSelector(state => state.count)

  const addCount = () => {
    dispatch({ type: 'add_count', value:5})
  }
  return (
    <div style={{ width: '100%', height: '100%', padding: 20 }}>
      <Card style={{ width: '100%', height: '100%' }}>
        <Breadcrumb separator=">">
          <Breadcrumb.Item onClick={toAdress} >Home</Breadcrumb.Item>
          <Breadcrumb.Item >面包屑导航</Breadcrumb.Item>
        </Breadcrumb>
        <>
          <h3>测试数据存储</h3>
          <span>count:{count}</span>
          <Button onClick={addCount}>count++</Button>
        </>
      </Card>



    </div>
  )
}